<template>
  <n-message-provider>
    <mount />
    <n-config-provider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
      <n-global-style />
      <wallpaper />
      <n-el tag="div">
        <router-view />
      </n-el>
    </n-config-provider>
  </n-message-provider>
</template>

<script setup lang="ts">
import { darkTheme, dateZhCN, lightTheme, useMessage, useOsTheme, zhCN } from "naive-ui"
import { computed, defineComponent } from "vue"
import Wallpaper from "@/components/wallpaper/index.vue"
import { useLocalStorage, useTitle } from "@vueuse/core"

const mode = useLocalStorage("theme", "auto")

const osTheme = useOsTheme()

const theme = computed(() => {
  if (mode.value === "light") {
    return lightTheme
  } else if (mode.value === "dark") {
    return darkTheme
  } else {
    return osTheme.value === "dark" ? darkTheme : lightTheme
  }
})

useTitle("BIU-NET " + (import.meta.env.VITE_TYPE === "SERVER" ? "服务中心" : "客户端"))

const Mount = defineComponent({
  setup: () => {
    window.$message = useMessage()
  },
  render: () => {
    return undefined
  }
})
</script>

<style lang="scss"></style>
